<template>
  <div>
    <el-form label-width="auto" @submit.prevent>
      <el-form-item label="用户名">
        <el-input v-model="modelFormData.account" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="modelFormData.password" placeholder="请输入密码" />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="login" :loading="stateIsLogging">登录</el-button>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import { AuthApi, LoginType } from '/@/api/AuthApi.ts'
  import { useRouter } from 'vue-router'
  import { Auth } from '/@/module/Auth.ts'
  import { RouterUtil } from '/@/utils/RouterUtil.ts';

  const DEFAULT_MODEL_FORM_DATA: LoginType = {
    account: 'guo',
    password: '123456',
  }

  const modelFormData = ref<LoginType>(DEFAULT_MODEL_FORM_DATA)

  const stateIsLogging = ref<boolean>(false) // 是否正在登录
  const router = useRouter()

  onMounted(() => {})

  const login = async () => {
    stateIsLogging.value = true

    try {
      await AuthApi.login(modelFormData.value)
      await Auth.resetMenuAndRouter()
      await RouterUtil.backToSourceRoute('/layout/home')
    } finally {
      stateIsLogging.value = false
    }
  }
</script>
<style scoped lang="scss"></style>